import React, { Component } from "react";
// 组件
import MainLayout from "../../../component/mainLayout/mainLayout";
import { Button } from "antd-mobile";
import BankCard from "../../../component/xhbBankCard/xhbBankCard";
import { Toast, Modal } from "antd-mobile";

import { InterfaceG, channelCode } from "../../../config/Config";
import yhTools from "../../../tools/yh";

import "./ElectronicAccountExist.scss";
import logoImg from "../../../images/icon-hua-tong-bank-logo.png";

const alert = Modal.alert;

/**
 * 描述：已开通的电子账户
 * 作者：zenghq
 * 日期：2020-05-29
 */
class ElectronicAccountExist extends Component {
	constructor(props) {
		super(props);
		this.state = {
			eleAcctInfoList: []
		};
	}
	/*******************生命周期 start************************/
	componentDidMount = () => {
		this.initData();
	};
	componentWillUnmount = () => { };
	/*******************生命周期 end************************/

	/*******************业务方法 start************************/
	initData() {
		let objs = {
			url: InterfaceG.appGetEleAcctInfoList,
			params: {
				version: "1.0",
				channelCode
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 10);
		yhTools.request(objs).then(async res => {
			Toast.hide();
			if (res.code === "0") {
				this.setState({
					eleAcctInfoList: res.data
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	/*******************业务方法 end************************/

	/*******************点击事件 start************************/
	/**我的电子账户点击 */
	handledMyAccount() {
		this.props.history.push("/electronicAccountList");
	}
	/**银行卡点击 */
	handledBank(item) {
		if (item.acctStatus == "0") {
			alert("", "该账户暂时无法操作，请联系银行客服400-8219-666", [
				{
					text: "查看详情",
					onPress: () =>
						this.props.history.push({
							pathname: "/iframePage",
							state: {
								title: "客户指引",
								src: "https://mobileapp.onebank.com.cn/ad/yh/"
							}
						})
				},
				{ text: "确定", onPress: () => console.log("ok") }
			]);
		}
	}
	/**进入未签约页面 */
	handledBuy() {
		this.props.history.push({
			pathname: "/xhbBalanceNoSign",
			params: {
				from: 'electronicAccountExist'
			}
		});
	}
	/*******************点击事件 end************************/

	/**渲染 */
	render() {
		const { eleAcctInfoList = [] } = this.state;
		const _pageParams = {
			header: {
				title: "已开通的电子账户",
				goBackAction: () => {
					this.props.history.push({
						pathname: "/xhbBalanceNoSign",
						params: {
							from: 'electronicAccountExist'
						}
					});
				}
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="electronic_account_exist-box">
					<div className="sub-title">已为您找到以下电子账户：</div>
					{eleAcctInfoList.map(item => (
						<div className="card-box" key={item.electronicCardNo}>
							<BankCard
								onClick={this.handledBank.bind(this, item)}
								disabled={item.acctStatus == "0"}
								src={logoImg}
								electronicCardNo={`**** **** **** ${item.electronicCardNo.substring(
									item.electronicCardNo.length - 4
								)}`}
							></BankCard>
						</div>
					))}
					<div className="sub-title1">系统将自动添加到我的电子账户内</div>
					<Button className="yhjr_button" onClick={this.handledBuy.bind(this)}>
						立即签约
					</Button>
					{/* <div
						className="yhjr_button-inline"
						onClick={this.handledMyAccount.bind(this)}
					>
						我的电子账户
					</div> */}
				</div>
			</MainLayout>
		);
	}
}

export default ElectronicAccountExist;
